<template>
	<view class="content">
		<view class="active">

			<view class="pd"></view>

			<!-- 下拉框 -->
			<view class="select">
				<u-dropdown>
					<u-dropdown-item @change="onArea" v-model="value1" :title="area" :options="options1"></u-dropdown-item>
					<u-dropdown-item @change="onActiveStatus" v-model="value2" :title="activeStatus" :options="options2"></u-dropdown-item>
				</u-dropdown>
			</view>
			<!-- 下拉框 -->

			<view class="scens">
				<block v-for="(a, b) in slist" :key="b">

					<view class="activeContent">
						<view class="activeImg">
							<image :src="a.icon" mode="aspectFit"></image>
						</view>
						<view class="h1">
							<text>{{ a.title }}</text>
							<view class="btn">
								<view class="btnRight" @click="openurl(a)">
									<text>查看详情</text>
								</view>
							</view>
						</view>
						<view class="h2">
							<view class="a">
								<image src="/static/homeActive/d.png" mode=""></image>
								<text>{{ a.time }}</text>
							</view>
						</view>
						<view class="h3">
							<image src="/static/homeActive/b.png" mode=""></image>
							<text>{{ a.address }}</text>
						</view>
						<view class="h4">
							<text>活动状态：{{activityClass[b] || '暂无状态'}}</text>
						</view>
					</view>
				</block>
        <u-loadmore :status="status" :icon-type="iconType" @loadmore="loadmore" />
			</view>
		</view>
	</view>
</template>

<script>
	//查看详情按钮背景
	import indexBackgroundImage from "@/static/homeActive/e.png"
	export default {
    data() {
      return {
        pageIndex:1,//当前第几页
        activeStatus:'活动状态',//活动状态
        area:'区域',//
        //场景列表
        slist: [],
        status: 'loadmore', //加载的状态
        iconType: 'flower', //加载图标样式
        isLoading: false, //是否要加载数据
        //下拉框
        value1: 0,
        value2: 0,
        options1: [
        ],
        options2: [
        ],

      };
    },
    created(){
      this.getSubAreaInfo()
      this.getActStatus()
      this.getActListByPage({
        pageIndex:this.pageIndex,//当前页
      })
    },
    computed: {
      //活动列表相关状态
      activityClass(){
        return this.slist.map(item=>{
          const {activityClass} = item
          return {
            0:'全部',1:'计划中',2:'进行中',3:'已结束'
          }[`${activityClass}`]

        })
      }
    },
		methods: {
      onDownStatsus(arr,arr1,value,type){
        let name = ''
        this[arr1].findIndex(item=>{
          if(item.value===value ){
            name= item.label
          }
        })
        this[arr] = name
        this.onRestFn()
        this.getActListByPage({
          pageIndex:this.pageIndex,//当前页
        })
      },
      //获取活动状态接口
      getActStatus(){
        const options =[]
        uni.request({
          url: `https://www.redcross668.com/api/mywebapi/GetActStatus`, //仅为示例，并非真实接口地址。
          data: {},
          header: {},
          success: (res) => {
            const {data:{list}} = res
            if(list.length){
              list.map(({ActValue:value,ActName:label})=>{
                options.push({
                  value,
                  label
                })
              })
              options.unshift({
                value:0,
                label:'全部'
              })
              console.log ( options ,1111)
              this.options2 = options ?? []
            }
          },
          fail:e=>{
            console.log ( e )
          }
        });
      },
      //域名
      onArea(value){
        this.onDownStatsus('area','options1',value,1)
      },
      //活动状态
      onActiveStatus(value){
        this.onDownStatsus('activeStatus','options2',value,2)
      },
			openurl: function(obj) {
				window.location.href =
					"https://www.redcross668.com/HyActivityIndex/Detail?id=" +
					obj.id +
					"&areaId=";
			},
      //重置操作
      onRestFn(){
        this.pageIndex = 1
        this.status = 'loadmore'
        this.isLoading = false
        this.slist = []
      },
      //2. 注册时获取区和街道数据
      //杭州市默认id是934
      //获取杭州市下所有的区
      getSubAreaInfo(pid='934'){
        const options =[]
        uni.request({
          url: `https://www.redcross668.com/api/MyWebApi/GetSubAreaInfo?pid=${pid}`, //仅为示例，并非真实接口地址。
          data: {},
          header: {},
          success: (res) => {
           const {data:{code,data:list}} = res
            if(code===200){
              if(list.length){
                list.map(({id:value,name:label})=>{
                  options.push({
                    value,
                    label
                  })
                })
                options.unshift({
                  value:0,
                  label:'全部'
                })
                this.options1 = options ?? []
              }
            }
          },
          fail:e=>{
            console.log ( e )
          }
        });
      },
      //活动列表
      getActListByPage(_params){
        if (this.isLoading) {
          return
        }
        this.isLoading = true
        this.status = 'loading'
        uni.showLoading({
          title: '活动列表加载中...',
          mask:true,
        })
        const params = {
          ..._params,//剩余参数
          pageSize:20,//默认为20条
          activityClass:this.value2,//activityClass活动状态 0全部，1计划中，2进行中，3已结束
          areaId:this.value1,//areaId 区域Id，0全部
        }
        uni.request({
          url: "https://www.redcross668.com/api/mywebapi/GetActListByPage",
          data: {
            ...params
          },
          header: {},
          success: (res) => {
            const {list,total} = res.data
            if(res.statusCode===200)
            {
              this.isLoading = false
              uni.hideLoading()
              if (!list.length) {
                this.status = 'nomore'
              }
              else {
                this.status = 'loadmore'
                this.slist = [... this.slist, ...list]
                if (this.slist.length >= total) {
                  this.status = 'nomore'
                }
              }
            }
            else {
              uni.hideLoading()
              this.status = 'nomore'
            }

          },fail:e=>{
            console.log ( e )
            uni.hideLoading()
          }
        });
      },
      loadmore() {
        // 每次出发该方法，都要使页数加一
        this.pageIndex++
        this.getActListByPage(
            {
              pageIndex:this.pageIndex,//当前页
            }
        )
      },
		},
    //加载到底部进行请求新的数据
    onReachBottom() {
      if (this.status === 'loadmore') {
        this.loadmore()
      }
    },
	};
</script>

<style scoped lang="scss">
	.content {
		padding-bottom: 112rpx;

		.active {
			.pd {
				padding-top: 32rpx;
			}
			.select{
				/deep/ .u-dropdown__content{
					overflow: inherit;
				}
				/deep/ .u-dropdown__content__mask{
					position: revert !important;
				}
			}

			.scens {
				display: flex;
				flex-direction: column;

				.activeContent {
					margin-bottom: 30rpx;
					padding: 30rpx;
					box-shadow: 0 8rpx 12rpx 0 rgba(0, 0, 0, 0.1);
					border-radius: 20rpx;

					.activeImg {
						height: 250rpx;
						border-radius: 20rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}

					.h1 {
						display: flex;
						justify-content: space-between;
						padding: 30rpx 20rpx 20rpx 20rpx;
						font-size: 30rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #222222;

						.btn {
							background: #4BACFE;
							border-radius: 30rpx;

							.btnRight {
								height: 47rpx;
								background-repeat: no-repeat;
								background-size: 100% 100%;

								text {
									width: 71rpx;
									height: 17rpx;
									font-size: 24rpx;
									font-family: PingFang;
									font-weight: bold;
									color: #FFFFFF;
									line-height: 29rpx;
									padding: 13rpx 22rpx 17rpx 20rpx;
								}
							}
						}
					}

					.h2 {
						image {
							margin-left: 20rpx;
							width: 24rpx;
							height: 24rpx;
						}

						text {
							font-size: 26rpx;
							font-family: PingFang;
							font-weight: 400;
							color: #666666;
							padding-left: 20rpx;
						}
					}

					.h3 {
						margin-top: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						image {
							margin-left: 20rpx;
							width: 24rpx;
							height: 24rpx;
						}

						text {
							font-size: 26rpx;
							font-family: PingFang;
							font-weight: 400;
							color: #666666;
							padding-left: 20rpx;
						}
					}

					.h4 {
						margin-top: 20rpx;

						text {
							font-size: 26rpx;
							font-family: PingFang;
							font-weight: 400;
							color: #222222;
							padding-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
